<template>
    <div class="content">
        <SearchTitle @searchClick="SearchTitleClick" />
        <div class="CenterBox">
            <div class="fhanBox" @click="fanhuifun">&lt;返回</div>
            <el-card>
                <div class="jsflexBox">
                    <div class="jsflexLabel">金融类型</div>
                    <div class="jsRightFlex">
                        <div :class="{ active: parameterData.type === item.value }" v-for="item in lcFinancialProductInfosDWTypeGroupByData"
                            :key="item.id" @click="jrlxTasbsfun(item.value)">
                            {{ item.text }}
                        </div>
                    </div>
                </div>
                <div class="jsflexBox">
                    <div class="jsflexLabel">银行类型</div>
                    <div class="jsRightFlex">
                        <div :class="{ active: parameterData.org_name === item.value }" v-for="item in lcFinancialProductInfosDWOrgNameGroupByData"
                            :key="item.id" @click="yhlxTasbsfun(item.value)">
                            {{ item.text }}
                        </div>
                    </div>
                </div>
            </el-card>
            <div class="jrlistTotalBox">共搜索到 {{totalData}} 条结果</div>
            <div class="jrlistforBox" v-for="item in lcFinancialProductInfosDWLoadData" :key="item.id">
                <financeListBox :formData="item" @ckxqClick="xqtjfun" />
            </div>
            <div class="fenyeBox">
                <el-pagination v-model:current-page="parameterData.pageNum" v-model:page-size="parameterData.pageSize"
                    :page-sizes="[100, 200, 300, 400]" background layout="prev, pager, next, jumper" :total="totalData"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup>
import SearchTitle from '@/components/general/SearchTitle.vue';
import financeListBox from '@/components/general/financeListBox.vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { lcFinancialProductInfosDWLoad } from '@/api/api.js'
import { onMounted, ref } from 'vue'
import { lcFinancialProductInfosDWTypeGroupBy, lcFinancialProductInfosDWOrgNameGroupBy } from '@/api/dictionary.js'
onMounted(() => {
    // 顶部搜索跳转进来的
    if (route.query.searchType) {
        parameterData.value.name = route.query.name;
    }
    lcFinancialProductInfosDWTypeGroupByfun()
    lcFinancialProductInfosDWOrgNameGroupByfun()
    lcFinancialProductInfosDWLoadfun()
})
// 类型
const lcFinancialProductInfosDWTypeGroupByData = ref([])
const lcFinancialProductInfosDWTypeGroupByfun = async () => {
    const res = await lcFinancialProductInfosDWTypeGroupBy()
    const data = Object.entries(res.result).map(([key, value]) => ({
        text: key,
        value: key,
    }));
    lcFinancialProductInfosDWTypeGroupByData.value = [
        {
            text: '全部',
            value: '',
        },
        ...data
    ]
}
// 银行
const lcFinancialProductInfosDWOrgNameGroupByData = ref([])
const lcFinancialProductInfosDWOrgNameGroupByfun = async () => {
    const res = await lcFinancialProductInfosDWOrgNameGroupBy()
    const data = Object.entries(res.result).map(([key, value]) => ({
        text: key,
        value: key,
    }));
    lcFinancialProductInfosDWOrgNameGroupByData.value = [
        {
            text: '全部',
            value: '',
        },
        ...data
    ]
}
// 产品列表
const parameterData = ref({
    pageNum: 1, // 当前页码
    pageSize: 8, // 每页显示条数
    type:'',
    org_name:'',
    name:''
})
const lcFinancialProductInfosDWLoadData = ref([])
const totalData = ref(0)
const lcFinancialProductInfosDWLoadfun = async () => {
    const res = await lcFinancialProductInfosDWLoad(parameterData.value)
    totalData.value = res.count
    lcFinancialProductInfosDWLoadData.value = res.result
}
// 分页
const handleCurrentChange = (val) => {
    parameterData.value.pageNum = val;
    lcFinancialProductInfosDWLoadfun()
}
// 类型
const jrlxTasbsfun = (val) => {
    parameterData.value.type = val;
    parameterData.value.pageNum = 1;
    lcFinancialProductInfosDWLoadfun()
}
// 银行
const yhlxTasbsfun = (val) => {
    parameterData.value.org_name = val;
    parameterData.value.pageNum = 1;
    lcFinancialProductInfosDWLoadfun()
}
// 顶部搜索点击事件
const SearchTitleClick = (name) => {
    parameterData.value.name = name;
    parameterData.value.pageNum = 1;
    lcFinancialProductInfosDWLoadfun()
}
// 返回
const fanhuifun = () => {
    router.go(-1);
};
const xqtjfun = (id) => {
    router.push({
        path: '/financeDetails',
        query: { id: id }
    });
};
</script>
<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    min-height: calc(100vh - 60px);
    background-size: 100%;
    background-color: #f3f9fe;
}

.fhanBox {
    font-size: 16px;
    color: #767879;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
        color: $green-color;
    }
}

.jrlistTotalBox {
    font-size: 16px;
    color: #1F1F1F;
    margin: 30px 0;
}
.jrlistforBox {
    margin-bottom: 20px;
}
.fenyeBox {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #F1F1F1;
    padding-top: 20px;
}
.jsflexBox {
    display: flex;
    margin-bottom: 20px;

    .jsflexLabel {
        width: 8%;
        font-size: 14px;
        color: #000000;
    }

    .jsRightFlex {
        display: flex;
        gap: 15px;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        cursor: pointer;
    }
}
.active {
    color: #2972FA;
    font-weight: bold;
}
</style>